<template>
  <div v-if="['action', 'seed-action'].includes(last.type)">{{ currentMicro ? currentApp.micros[currentMicro].label : '<无>' }}</div>
  <ElSelect v-else v-model="value">
    <ElOption label="<无>" value="" />
    <ElOption v-for="(micro, microName) in micros" :label="micro.label" :value="microName" :key="microName" />
  </ElSelect>
</template>
<script setup lang="ts">
  import { ElOption, ElSelect } from 'element-plus';
  import { computed, ref, watch } from 'vue';
  import { breadcrumbs, currentApp, currentMicro } from '@/views/seed-dev';

  const props = defineProps<{modelValue?: string}>()
  const emits = defineEmits(['update:modelValue'])

  const micros = computed(() => currentApp.value?.micros || {})
  const last = breadcrumbs.value[breadcrumbs.value.length - 1]

  const value = ref(props.modelValue)
  watch(() => props.modelValue, () => value.value = props.modelValue)
  watch(() => value.value, () => emits('update:modelValue', value.value))
</script>